<template>
  <div>
    <div>
      搜索内容：<el-input v-model="vo.keyWord" placeholder="请输入手机号或用户名" style="width: 222px"></el-input>
      &nbsp;&nbsp;
      <el-button type="primary" icon="el-icon-search" circle @click="search(1)"></el-button>
      <el-button type="primary" icon="el-icon-first-aid-kit" circle @click="toAdd"></el-button>
      <el-button type="danger" icon="el-icon-delete" circle @click="delAll"></el-button>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="hrID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="headImg" label="头像">
        <template slot-scope="scope">
          <img :src="$baseUrl+'/img/'+scope.row.headImg" style="width: 77px">
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别">

      </el-table-column>
      <el-table-column prop="phone" label="手机号码"></el-table-column>
      <el-table-column prop="enabled" label="是否可用">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.enabled==1"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
<!--      <el-table-column prop="location" label="地址"></el-table-column>-->
<!--      <el-table-column prop="remark" label="备注"></el-table-column>-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="primary"
              @click="handleEdit( scope.row)">设置角色
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete( scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        background
        layout="prev, pager, next"
        @current-change="search"
        :current-page="cp"
        :page-size="ps"
        :total="total">
    </el-pagination>

    <el-dialog title="编辑框" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" >
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="type">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="头像" :label-width="formLabelWidth" prop="type">
          <el-upload
              class="avatar-uploader"
              :action="this.$baseUrl +'/upload/img'"
              :show-file-list="false"
              :on-success="uploadImg">
            <img v-if="imageUrl" :src="this.$baseUrl+'/img/'+form.headImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="type">
          <el-radio-group v-model="form.sex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="type">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否可用" :label-width="formLabelWidth" prop="type">
          <el-radio-group v-model="form.enabled">
            <el-radio :label="true">可用</el-radio>
            <el-radio :label="false">不可用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="type">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth" prop="type">
          <el-cascader
              v-model="form.areses"
              :props="cascProps"
              :options="addresses"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" >
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth" prop="type">
          <el-checkbox :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
          <el-checkbox-group
              v-model="form.rids">
            <el-checkbox v-for="role in roles" :label="role.id" :key="role.id">{{ role.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'User',
  data() {
    return {
      rules:{
type:[{ required: true, message: '请输入活动名称', trigger: 'blur' },]
      },
      tableData: [],
      vo: {},
      total: 10,
      ps: 2,
      cp: 1,
      dialogFormVisible: false,
      form: {
        rids: [],
        areses: []
      },
      formLabelWidth: '120px',
      addresses: [],
      cascProps: {
        label: 'name',
        value: 'id'
      },
      imageUrl: '',
      roles: [],
      isIndeterminate: true,
      allRoleIds: [],
      delRows: []
    }
  },
  methods: {
    search(cp = 1) {
      this.cp = cp;
      axios.post(this.$baseUrl + '/user/search/' + this.cp + '/' + this.ps, this.vo).then(res => {
        this.tableData = res.data.rows;
        this.total = res.data.total;
      })
    },
    toAdd() {
      // 对象中数组进行初始化
      this.dialogFormVisible = true;
    },
    uploadImg(url) {
      //上传成功后，赋值
      this.imageUrl = url;
      this.form.headImg = url;
    },
    handleEdit(row) {
      this.form = row;
      this.form.sex = row.sexIndex;
      this.form.rids = []
      this.form.areses = [row.province, row.city, row.district]
      this.imageUrl = row.headImg
      this.getRidsByUId(row.id)

      this.dialogFormVisible = true;
    },
    getAddresses() {
      axios.get(this.$baseUrl + '/area/getTree').then(res => {
        this.addresses = res.data.data;
      })
    },
    getRoles() {
      axios.get(this.$baseUrl + '/role').then(res => {
        console.info(res.data)
        // 所有角色信息
        this.roles = res.data.data;
        // 获取所有角色的ID
        this.roles.map(item => {
          this.allRoleIds.push(item.id)
        })
      })
    },
    save() {
      // 数组解构
      let [a, b, c] = this.form.areses;
      this.form.province = a;
      this.form.city = b;
      this.form.district = c;
      let method = null
      if (this.form.id != null) {
        method = axios.put(this.$baseUrl + '/user', this.form)
      } else {
        method = axios.post(this.$baseUrl + '/user', this.form)
      }

      method.then(res => {
        if (res.data.flag) {
          alert("操作成功")
          this.dialogFormVisible = false
          this.search()
        }
      })
    },
    getRidsByUId(uid) {
      axios.get('http://localhost:8082/user/getRidsByUid/' + uid).then(res => {
        this.form.rids = res.data.data;
      })
    },
    // 全选
    handleCheckAllChange(flag) {
      if (flag) {
        this.form.rids = this.allRoleIds;
        this.isIndeterminate = false;
      } else {
        this.form.rids = []
        this.isIndeterminate = true;
      }
    },
    // 获取批删所选数据
    handleSelectionChange(val) {
      this.delRows = val;
    },
    // 批删
    delAll() {
      let ids = this.delRows.map(item => item.id);
      console.info(ids)
      axios.post(this.$baseUrl + '/user/delByIds', ids).then(res => {
        if (res.data.flag) {
          alert("操作成功")
          // 刷新列表
          this.search();
        }
      })
    },
    handleDelete(id){
      axios.delete(this.$baseUrl + '/user/'+id).then(res => {
        if (res.data.flag) {
          alert("操作成功")
          // 刷新列表
          this.search();
        }
      })
    }

  },
  created() {
    this.search();
    this.getAddresses();
    this.getRoles();
  }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
